<template>
    <div class="chart-box cost-profit">
        <div class="chart-title">
            <svg t="1626833189392" class="icon" style="vertical-align: -0.23em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19460" width="200" height="200"><path d="M619.5 297L512 419.9 404.5 297h-86L469 469H340v43h129v86H340v43h129v129h86V641h129v-43H555v-86h129v-43H555l150.5-172z" fill="#409EFF" p-id="19461"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m0 832c-212.1 0-384-171.9-384-384s171.9-384 384-384 384 171.9 384 384-171.9 384-384 384z" fill="#409EFF" p-id="19462"></path></svg>
            成本利润
        </div>
        <div class="chart-content">
            <div :id="container" class="chart-views"></div>
        </div>
    </div>
</template>
<script>
import { deepAssign, formatterNumber } from '@/common/js/util.js'
import Highcharts from 'highcharts';
export default {
    props: {
        dataArr: {
            type: Object,
            default: {}
        },
        container: {
            type: String,
            default: 'ct7'
        }
    },
    data() {
        return {
            charts: null,
        }
    },
    created() {
        var colors = [
            '#4293F4', // 蓝色
            '#F4B342', // 黄色
            '#FF5A5A', // 红色
            '#29E242'  // 绿色
        ];
        // 创建全局渐变色组
        Highcharts.getOptions().colors = colors.map(function (color) {
        	return {
        		radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 }, // 径向渐变
        		stops: [
        			[0, Highcharts.Color(color).brighten(-0.3).get('rgb')], // darken
        			[1, color]
        		]
        	};
        });
    },
    methods: {
        chartInit(dataArr = null) {
            dataArr = deepAssign({}, dataArr);
            const that = this;
            this.charts = Highcharts.chart(this.container, {
                chart: Object.assign({ 
                    type: 'pie', 
                }, dataArr.chart || {}), 
	            title: {
                    text: `<span class="highcharts-title-span">卡券利润<br><font>${dataArr.profit_percentage}%</font></span>`,
                    floating: true,
                    align: 'left',
                    useHTML: true,
                    // verticalAlign: 'middle',
                    // y: 0,
                    style: { 
                        "color": '#888888', 
                        "fontSize": "12px",
                        //"display": 'block',
                    }
                },
                credits: { enabled: false },  // 去版权水印
                exporting: { enabled: false }, // 隐藏导出
                tooltip: {
                    enabled: false,
                    borderRadius: 6, 
                    borderWidth: 0,
                    backgroundColor: 'rgba(255, 255, 255, 0.9)',
                    useHTML: true,
                    formatter: function() {
                        return `<small style="margin-bottom:5px;display:block">${this.key}: ${that.numberFormatter(this.y)}元</small><span style="color:${this.color};font-size:14px">●</span>占比: ${(this.y * 100/this.total).toFixed(2)}%<br/>`
                    },
                    padding: 12
                },
                legend: {
                    enabled: false,
                },
                plotOptions: {
                    pie: {
			            borderColor: 'transparent',
                        cursor: 'pointer',
			            showInLegend: false,
			            allowPointSelect: true, // 允许选中
			            dataLabels: {
			            	enabled: true,
			            	//format: '{point.y}单 {point.name}',
                            useHTML: true,
                            formatter: function() {
                                return `${this.key} ${that.numberFormatter(this.y)}元`
                                // return `${this.key} ${parseInt(this.y*100)/100}元`;
                            },
			            	style: {
			            		color: '#888888',
                                textOutline: 'none', // 去阴影
                                fontWeight: 'normal',
                                fontSize: '11px'
			            	},
                            connectorWidth: 1, // 连接线宽度
                            connectorPadding: 10, // 连接线与标签间隔 
                            distance: 15, // 连接线长度
                            padding: 0, // 标签的内边距
			            },
                        slicedOffset: 4, // 点击展开的幅度
                        innerSize: '70%', // 粗细,
		                minSize: 160, // 最小尺寸
                        //size: 180,
                    },
                },
                series: dataArr.series
            }, function(c) {
                that.titleResize(c)
            })
            window.onresize = () => {
                setTimeout(() => {
                    this.titleResize(this.charts)
                }, 200)
            }
        },
        numberFormatter(num) {
            return formatterNumber(num, 10000, 2, true)
        },
        titleResize(chart) {
            // 环形图圆心位置
            const centerX = chart.series[0].center[0];
            const centerY = chart.series[0].center[1];
            chart.setTitle({
                y: centerY - 12,
                x: centerX > 70 ? centerX - 50 : centerX - 35
            });
        }
    },
    watch: {
        'dataArr.series': function(val, oldVal) {
            this.chartInit(this.dataArr)
        }
    }
}
</script>
<style lang="scss" scoped>
    .container, .chart-views{
        width: 100%;
        height: 100%;
    }
    .chart-content {
        padding: 8px 10px 0;
        .chart-views {
            width: 100%;
            height: 101%;
        }
        /deep/.highcharts-title {
            width: 100px;
            height: 50px;
            .highcharts-title-span {
                text-align: center;
                display: block;
                font {
                    font-size: 18px;
                    font-weight: bold;
                    color: #4293F4;
                }
            }
        }
    }
</style>